<template>
  <view class="container">
    <view class="maxImage">
      <van-icon class="maxIcon" name="arrow-left" @click="maxIcon" />
      <image class="Image" :src="categoryDetail.coverImage" mode="widthFix" style="width: 100%;"></image>
      <view class="maxback"></view>
    </view>

    <view class="userInfo">
      <!-- 自我介绍 -->
      <view class="userInfo_box">
        <view class="userInfo_box_left">
          <image :src="categoryDetail.previewImage" mode="aspectFill"></image>
          <view class="userInfo_box_left_box">
            <h1>{{categoryDetail.categoryName}}</h1>
            <text>{{categoryDetail.remarks?categoryDetail.remarks:'在这里我们讨论一切宠物的日常'}}</text>
          </view>
        </view>
        <view :class="categoryDetail.isJoined?'userInfo_box_right1':'userInfo_box_right'" @click="onJoiner">
          {{categoryDetail.isJoined?'已加入': '加入'}}
        </view>
      </view>

      <view class="userInfo_total" @click="navTo('/subpkg/circlepersonlist/circlepersonlist?id=' + categoryDetail.id)">
        <view class="userInfo_total_img" v-for="(item,index) in categoryDetail.joinerAvatars" :key="index">
          <image :src="item" mode="aspectFill"></image>
        </view>
        <view class="userInfo_total_text">
          <text>等<text>{{categoryDetail.joiners}}</text>人加入</text>
          <van-icon name="arrow" />
        </view>
      </view>

      <!--      <view class="userInfo_title">
        <h1 class="userInfo_title_text">圈内活跃大咖</h1>
        <scroll-view scroll-x class="userInfo_title_scroll">
          <view class="userInfo_title_box">
            <image class="minImage" src="/static/logo.png" mode="aspectFill"></image>
            <h1>王牌四号</h1>
            <view class="userInfo_title_box_btn">
              关注
            </view>
          </view>
        </scroll-view>
      </view> -->

      <van-tabs animated swipeable :active="1" @change="onChangeMyactive" sticky>
        <van-tab title="精华">
          <view class="Myactive_box padding_left_right" v-show="curTab == 0">
            <block v-if="choiceList.length !== 0" v-for="(item,i) in choiceList" :key="i">
              <userIntroduced :varietyShow="false" :conditionItem="item" @onfollowed="onFollowed($event,'choiceness')"
                @onlikeShow="onLiked($event,'choiceness')" @onremoveShow="onremoveShow($event,'choiceness')">
              </userIntroduced>
            </block>

            <view class="Myactive_box_no" v-if="choiceList.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何文章，快去发表一篇吧！</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="动态">
          <view class="Myactive_box padding_left_right" v-show="curTab == 1">
            <block v-if="postList.length !== 0" v-for="(item,i) in postList" :key="i">
              <userIntroduced :varietyShow="false" :conditionItem="item" @onfollowed="onFollowed($event,'post')"
                @onlikeShow="onLiked($event,'post')" @onremoveShow="onremoveShow($event,'post')"></userIntroduced>
            </block>
            <view class="Myactive_box_no" v-if="postList.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何动态，快去发表一篇吧！</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="文章">
          <view class="Myactive_box padding_left_right" v-show="curTab == 2">
            <block v-if="articleList.length !== 0" v-for="(item,i) in articleList" :key="i">
              <userIntroduced :varietyShow="false" :conditionItem="item" :articleText="false"
                @onfollowed="onFollowed($event,'article')" @onlikeShow="onLiked($event,'article')"
                @onremoveShow="onremoveShow($event,'article')">
              </userIntroduced>
            </block>
            <view class="Myactive_box_no" v-if="articleList.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何文章，快去发表一篇吧！</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="活动">
          <view class="Myactive_box padding_left_right" v-show="curTab == 3">
            <block v-for="(item,i) in activityList" :key='i'>
              <userActivity :activityItem="item" :circleShow="true"></userActivity>
            </block>
            <view class="Myactive_box_no" v-if="activityList.length == 0">
              <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
              <text>还没发布任何活动，快去发表一篇吧！</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="购买热度排行" v-if="rankingList.length !== 0">
          <view class="Myactive_box" v-show="curTab == 4">
            <block v-for="(item,i) in rankingList" :key="i">
              <userRanking :rankingItem="item"></userRanking>
            </block>
          </view>
        </van-tab>
      </van-tabs>
    </view>
    <!-- 悬浮 -->
    <userSuspension v-if="categoryDetail.id" :remarkShow="false" :circleId="categoryDetail.id"
      :circleName="categoryDetail.categoryName">
    </userSuspension>
  </view>
</template>

<script>
  import userIntroduced from '@/components/user_introduced/user_introduced.vue'
  import userSuspension from "@/components/user_suspension/user_suspension.vue"
  import userRanking from "@/components/pet_ranking/pet_ranking.vue"
  import userActivity from "@/components/user_activity/user_activity.vue"

  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'

  import {
    circleparticulars,
    circleessence,
    getheatseniority,
    getActivity
  } from '@/api/circle.js'
  import {
    page
  } from "@/api/article.js";

  import {
    behaviorJoiner
  } from "@/api/community.js";

  export default {
    data() {
      return {
        categoryDetail: [],
        curTab: 1,
        articleType: 0,
        current: 1,
        total: 0,
        //精选
        choiceList: [],
        choiceCurrent: 1,
        choiceTotal: 0,

        //动态
        postList: [],
        postCurrent: 1,
        postTotal: 0,

        //文章
        articleList: [],
        articleCurrent: 1,
        articleTotal: 0,

        //活动
        activityList: [],
        activityCurrent: 1,
        activityTotal: 0,

        //排行
        rankingList: [],
        categoryId: ''
      };
    },
    components: {
      userIntroduced,
      // userFocus,
      userSuspension,
      userRanking,
      userActivity
    },
    computed: {
      ...mapGetters('m_user', ['userInfo']),
    },

    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: this.categoryDetail.categoryName,
        imageUrl: this.categoryDetail.previewImage,
        path: '/subpkg/petInfo/petInfo?userId=' + this.userInfo.id + '&id=' + this.categoryDetail.id,
        success: (res) => {
          that.$util.Tips({
            title: res
          })
        },
        fail: (res) => {
          that.$util.Tips({
            title: res
          })
        }
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.categoryDetail.categoryName,
        imageUrl: this.categoryDetail.previewImage,
        path: '/subpkg/petInfo/petInfo?userId=' + this.userInfo.id + '&id=' + this.categoryDetail.id
      };
    },
    // #endif

    onLoad(option) {
      this.categoryId = option.id
      circleparticulars(this.categoryId).then(res => {
        this.categoryDetail = res.data
      });
      this.getcircleessence();
    },
    onReachBottom() {
      if (this.current * 20 >= this.total) return this.$util.Tips({
        title: '数据加载完毕！'
      });
      this.current += 1
      if (this.curTab === 3) {
        this.getActivity()
      } else if (this.curTab === 4) {
        this.heatseniority()
      } else {
        this.getcircleessence()
      }
    },
    methods: {
      maxIcon() {
        uni.navigateBack()
      },
      onFollowed(res, type) {
        var list = [];
        if (type == 'post') {
          list = this.postList;
        } else if (type == 'article') {
          list = this.articleList;
        } else if (type == 'choiceness') {
          list = this.choiceList;
        }
        list.forEach((item) => {
          if (item.createUser === res.createUser) {
            item.followed = !res.followed;
          }
        });
      },
      onLiked(res, type) {
        var list = [];
        if (type == 'post') {
          list = this.postList;
        } else if (type == 'article') {
          list = this.articleList;
        } else if (type == 'choiceness') {
          list = this.choiceList;
        }
        list.forEach((item) => {
          if (item.id === res.id) {
            item.isLiked = !res.isLiked
            if (item.isLiked) {
              item.likes += 1
            } else {
              if (item.likes > 0) {
                item.likes -= 1
              }
            }
          }
        });
      },
      onremoveShow(e, type) {
        var list = [];
        if (type == 'post') {
          list = this.postList;
        } else if (type == 'article') {
          list = this.articleList;
        } else if (type == 'choiceness') {
          list = this.choiceList;
        }
        const index = list.findIndex(item => item.id == e)
        list.splice(index, 1)
      },
      onJoiner() {
        uni.report('JointheCircle', '加入圈子');
        //0 圈子  1 产品  2活动
        behaviorJoiner(this.categoryDetail.id, 0).then(res => {
          this.categoryDetail.isJoined = !this.categoryDetail.isJoined
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
        });
      },
      onChangeMyactive(e) {
        this.curTab = e.detail.index;
        this.choiceList = []
        this.postList = []
        this.articleList = []
        this.activityList = []
        if (this.curTab === 0) {
          this.articleType = -1;
          this.current = this.choiceCurrent;
          this.getcircleessence();
        } else if (this.curTab === 1) {
          this.articleType = 0;
          this.current = this.postCurrent;
          this.getcircleessence();
        } else if (this.curTab === 2) {
          this.articleType = 1;
          this.current = this.articleCurrent;
          this.getcircleessence();
        } else if (this.curTab === 3) {
          this.current = this.activityCurrent
          this.getactivityList();
        } else if (this.curTab === 4) {
          this.heatseniority()
        }
      },
      getcircleessence() {
        let that = this;
        page(that.categoryId, 0, that.articleType, that.current).then(res => {

          if (res.data && res.data.records) {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
          }
          if (this.curTab === 0) {
            that.choiceCurrent = res.data.current;
            that.choiceTotal = res.data.total;
            that.choiceList = [...that.choiceList, ...res.data.records];
            // console.log(0)
          } else if (this.curTab === 1) {
            // console.log(1)
            that.postCurrent = res.data.current;
            that.postTotal = res.data.total;
            that.postList = [...that.postList, ...res.data.records];
            console.log(that.postList)
          } else if (this.curTab === 2) {
            that.articleCurrent = res.data.current;
            that.articleTotal = res.data.total;
            that.articleList = [...that.articleList, ...res.data.records];
          }
        });
      },
      getactivityList() {
        let that = this;
        getActivity(that.categoryId, that.current).then(res => {
          // console.log(res.data)
          res.data.records.forEach(item => {
            item.validDate = item.validDate.split(',')
            // 时间剩余
            var time = item.validDate[1]
            var repTime = time.replace(/-/g, '/');
            var timeTamp = Date.parse(repTime);
            item.validDate[1] = timeTamp - new Date().getTime()
          })

          this.activityList = [...this.activityList, ...res.data.records]
          // console.log(this.activityList.records)
        })
      },
      heatseniority() {
        getheatseniority(0, this.categoryId).then(res => {
          this.rankingList = res.data
        })
      },

      onconcealClose(e) {
        this.concealshow = false
      },
      // 跳转
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;

    // background-color: #5C8DFF;
    /deep/ .van-dialog__header {
      padding: 100rpx 0px !important;
    }

    /deep/ .van-popup {
      overflow: hidden;
    }

    .concealshow {
      .van-cell {
        padding-left: 95rpx !important;
        height: 33.33% !important;

        .van-cell__title {
          font-size: 30rpx;
          line-height: 64rpx;
        }

        .iconfont {
          position: absolute;
          top: 50%;
          left: 40rpx;
          transform: translate(0, -50%);
          font-size: 36rpx;
        }
      }
    }

    .informshow {
      /deep/ .van-cell {
        height: 16% !important;

        /deep/ .van-cell__title {
          font-size: 34rpx;
          line-height: 64rpx;
        }
      }

      .informshow_float {
        position: absolute;
        top: 60rpx;
        left: 45rpx;
      }

      .informshow_return {
        text-align: center;
        padding: 53rpx 45rpx;
        font-size: 40rpx;
        // align-items: center;
        // justify-content: center;
        border-bottom: 1px solid rgba(241, 241, 241, 1);
      }
    }


    /deep/ .van-cell {
      align-items: center;

      /deep/ .van-cell__title {
        font-size: 34rpx;
        line-height: 64rpx;
      }
    }

    .padding_left_right {
      padding-left: 24rpx;
      padding-right: 24rpx;
      box-sizing: border-box;
    }

    /deep/.uni-scroll-view ::-webkit-scrollbar {
      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
      background: transparent;
    }

    /deep/ .van-tabs__content {
      overflow: initial;
    }

    /deep/ .van-tab {
      flex: none !important;
      -webkit-flex: none !important;
      padding: 0 55rpx 0 10rpx !important;
      color: rgba(61, 61, 61, 0.5) !important;
    }

    /deep/ .van-tabs__wrap::after {
      border: none;
    }

    /deep/ .van-tabs__wrap {
      padding: 0 24rpx;
    }

    /deep/ .van-tabs__line {
      width: 40rpx !important;
      height: 8rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 78rpx;
      left: -7px !important;
    }

    /deep/ .van-ellipsis {
      // font-weight: bold;
      font-size: 32rpx;
      // color: rgba(61, 61, 61, 0.5);
    }

    /deep/ .van-tab--active {
      color: rgba(0, 0, 0, 1) !important;
      font-weight: bold;
    }

    .container {
      .maxImage {
        position: relative;
        width: 100%;
        height: 550rpx !important;
        overflow: hidden;

        .Image {
          width: 100%;
          // height: 100%;
          // filter: blur(10.2rpx);
        }

        .maxIcon {
          position: fixed;
          z-index: 1;
          top: 80rpx;
          left: 24rpx;
          font-size: 48rpx;
          color: #fff;
        }

        .maxback {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }

      .userInfo {
        position: relative;
        z-index: 10;
        margin-top: -60rpx;
        background-color: #fff;
        border-top-left-radius: 50rpx;
        border-top-right-radius: 50rpx;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;

        .Myactive_box_flex {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .Myactive_box {
          padding-top: 30rpx;
          width: 100%;

          .Myactive_box_no {
            // height: 300rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // margin-top: 200rpx;
            height: 600rpx;

            image {
              width: 264rpx;
              height: 260rpx;
            }

            text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 26rpx;
              margin-top: 30rpx;
            }
          }
        }

        .userInfo_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 48rpx;
          position: relative;
          top: -10rpx;

          .userInfo_box_left {
            display: flex;
            align-items: center;

            // height: 100%;
            image {
              width: 200rpx;
              height: 200rpx;
              position: relative;
              top: -16rpx;
              border-radius: 10rpx;
            }

            .userInfo_box_left_box {
              display: flex;
              // align-items: center;
              flex-direction: column;
              justify-content: space-around;
              height: 150rpx;
              margin-left: 31rpx;

              h1 {
                color: rgba(61, 61, 61, 1);
                font-size: 40rpx;
              }

              text {
                color: rgba(61, 61, 61, 0.5);
                font-size: 24rpx;
                display: block;
                width: 285rpx;
                line-height: 37rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }
          }

          .userInfo_box_right {
            width: 128rpx;
            height: 52rpx;
            background-color: rgba(253, 211, 56, 1);
            border-radius: 26.5rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 26rpx;
            font-weight: 500;
          }

          .userInfo_box_right1 {
            width: 128rpx;
            height: 52rpx;
            background-color: rgba(253, 211, 56, 0.5);
            border-radius: 26.5rpx;
            text-align: center;
            line-height: 52rpx;
            font-size: 26rpx;
            color: rgba(61, 61, 61, 0.5);
            font-weight: 500;
          }
        }

        .userInfo_total {
          padding: 0 48rpx;
          display: flex;
          align-items: center;
          height: 40rpx;
          margin-top: 20rpx;
          margin-bottom: 30rpx;

          .userInfo_total_img {
            image {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              margin-right: 11rpx;
            }
          }

          .userInfo_total_text {
            display: flex;
            align-items: center;
            color: rgba(61, 61, 61, 0.5);
            font-size: 24rpx;

            text {
              margin: 0 10rpx;
            }
          }
        }

        .userInfo_title {
          color: rgba(61, 61, 61, 1);
          font-size: 36rpx;
          margin-top: 38rpx;
          padding: 0 24rpx 29rpx;

          .userInfo_title_text {
            font-weight: bold;
            margin-bottom: 35rpx;
          }

          .userInfo_title_scroll {
            white-space: nowrap;
          }

          .userInfo_title_box:last-child {
            margin-right: 0 !important;
          }

          .userInfo_title_box {
            width: 210rpx;
            height: 314rpx;
            padding-top: 30rpx;
            // box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
            border-radius: 15rpx;
            border: 1px solid rgba(61, 61, 61, 0.05);
            // margin-top: 29rpx;
            display: inline-flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            margin-right: 24rpx;

            .minImage {
              width: 110rpx;
              height: 110rpx;
              border-radius: 50%;
            }

            h1 {
              margin: 20rpx 0;
              font-size: 26rpx;
            }

            .userInfo_title_box_btn {
              width: 128rpx;
              height: 52rpx;
              font-size: 26rpx;
              font-weight: 500;
              text-align: center;
              line-height: 52rpx;
              background-color: rgba(253, 211, 56, 1);
              border-radius: 26.5rpx;
            }
          }
        }
      }
    }
  }
</style>
